<template>
    <div>
        <span style="font-weight: bold; font-size: 20px;">{{ title }}比对结果：</span>
        <span :style="{ color: resultColor, fontWeight: 'bold', fontSize: '20px' }">
            {{ compareResult }}
        </span>
        <a @click="handleDetailStatus" style="margin-left: 8px">
            {{ detailStatus ? '收起详情' : '展开详情' }}
            <a-icon :type="detailStatus ? 'up' : 'down'" />
        </a>
        <template v-if="detailStatus">
            <p v-for="(record, index) in gpsRecord" :key="index">
                <span>{{ record.parkAdr }} - {{ record.parkMins }} 分钟</span>
                <span v-if="record.distance"> - </span>
                <span :style="{ color: record.distance < 2000 ? 'green' : 'red' }" v-if="record.distance">{{
                    record.distance }}</span>
                <span v-if="record.distance"> 米 </span>
            </p>
        </template>
    </div>
</template>

<script>
export default {
    name: 'GpsRecordModal',
    props: {
        gpsRecord: {
            type: Array,
            default: () => []
        },
        title: {
            type: String,
            default: ''
        },
    },
    components: {
    },
    data() {
        return {
            detailStatus: false,
            result: '无',
        }
    },
    computed: {
        // 计算比对结果：有任何一个 record.score1 == '1' 则显示'合格'，否则显示'不合格'
        compareResult() {
            if (!this.gpsRecord || this.gpsRecord.length === 0) {
                return '无';
            }

            // 检查是否有任何一个记录的 score1 等于 '1'
            const hasScore1 = this.gpsRecord.some(record => record.score1 === '1');

            return hasScore1 ? '合格' : '不合格';
        },
        // 计算结果颜色：合格为绿色，不合格为红色
        resultColor() {
            if (this.compareResult === '合格') {
                return '#52c41a'; // 绿色
            } else if (this.compareResult === '不合格') {
                return '#ff4d4f'; // 红色
            }
            return '#333'; // 默认颜色
        }
    },
    methods: {
        handleDetailStatus() {
            this.detailStatus = !this.detailStatus;
        }
    }
}
</script>